<template>
    <transition name="slide-fade">
        <div v-if="song">
            <div class="song-info">
                <h4>{{song.name}}</h4>
                <div style="font-size:0.9em;">{{song.artists[0].name}}</div>
            </div>
            <Lyric :id="id"></Lyric>
            <control class="my-controls"></control>
        </div>
    </transition>
</template>
<script>
    import {Indicator} from 'mint-ui';
    import {mapState} from 'vuex';
    import Lyric from '../components/Lyric.vue';
    import Control from '../components/Control.vue'

    export default {
        name: 'song',
        data() {
            return {
                id: this.$route.params.id,
                show: false
            }
        },
        computed: {
            ...mapState(['song', 'playing'])
        },
        created(){
            Indicator.open('加载中...');
            this.$store.dispatch('fetch_song', this.id).then(() => {
                Indicator.close();
                this.show = true;
            });
        },
        methods: {
        },
        components: {Lyric, Control}
    }
</script>